<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%@ page  contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<%@ include file="/inc/commons-head.jsp"%>

	<script type="text/javascript">
		jQuery(function ($) {
			function pageList(currentPage, rowsPerPage) {
				var data = {
					currentPage: currentPage,
					rowsPerPage, // 相当于rowsPerPage: rowsPerPage
					"search['fullName']": $("#searchForm :input[name=name]").val(),
					"search['company']": $("#searchForm :input[name=company]").val(),
					"search['phone']": $("#searchForm :input[name=phone]").val(),
					"search['source']": $("#searchForm :input[name=source]").val(),
					"search['owner']": $("#searchForm :input[name=owner]").val(),
					"search['mphone']": $("#searchForm :input[name=mphone]").val(),
					"search['state']": $("#searchForm :input[name=state]").val()
				};
				// JSON.stringify({name:1}) ==> '{"name":1}'
				$.ajax({
					url: "/clue/page.json",
					//type: "post",
					data: data,
					/*headers: {
						"Content-Type":"application/json"
					},*/
					success(page) {
						// 初始化表格数据
						var arr = [];
						$(page.data).each(function (i) {
							arr.push(`<tr class="`+(i%2==0?"active":"")+`">
                                <td><input name="id" value="`+this.id+`" type="checkbox"/></td>
                                <td><a href="detail.jsp?id=`+this.id+`" style="text-decoration: none; cursor: pointer;">`+this.fullName+`</a></td>
                                <td>`+this.company+`</td>
					            <td>`+this.phone+`</td>
					            <td>`+this.source+`</td>
					            <td>`+this.owner+`</td>
					            <td>`+this.mphone+`</td>
					            <td>`+this.state+`</td>
                            </tr>` )
						});
						$("#dataBody").html( arr.join("") );

						// 初始化分页控件
						$("#page").bs_pagination({
							currentPage: page.currentPage,          // 页码
							rowsPerPage: page.rowsPerPage,          // 每页显示的记录条数
							maxRowsPerPage: page.maxRowsPerPage,    // 每页最多显示的记录条数
							totalPages: page.totalPages,            // 总页数
							totalRows: page.totalRows,              // 总记录数
							visiblePageLinks: page.visiblePageLinks,// 显示几个卡片
							// 页码发生变化时执行的函数
							onChangePage: function (event, data) {
								pageList(data.currentPage, data.rowsPerPage);
							}
						});
					}
				})
			}
			pageList();

			$("#searchBtn").click(function () {
				pageList();
			})





		});

	</script>
</head>
<body>

<!-- 创建线索的模态窗口 -->
<div class="modal fade" id="createClueModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 90%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">创建线索</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">

					<div class="form-group">
						<label for="create-clueOwner" class="col-sm-2 control-label">所有者<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="create-clueOwner">
								<option>zhangsan</option>
								<option>lisi</option>
								<option>wangwu</option>
							</select>
						</div>
						<label for="create-company" class="col-sm-2 control-label">公司<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-company">
						</div>
					</div>

					<div class="form-group">
						<label for="create-call" class="col-sm-2 control-label">称呼</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="create-call">
								<option></option>
								<option>先生</option>
								<option>夫人</option>
								<option>女士</option>
								<option>博士</option>
								<option>教授</option>
							</select>
						</div>
						<label for="create-surname" class="col-sm-2 control-label">姓名<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-surname">
						</div>
					</div>

					<div class="form-group">
						<label for="create-job" class="col-sm-2 control-label">职位</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-job">
						</div>
						<label for="create-email" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-email">
						</div>
					</div>

					<div class="form-group">
						<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-phone">
						</div>
						<label for="create-website" class="col-sm-2 control-label">公司网站</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-website">
						</div>
					</div>

					<div class="form-group">
						<label for="create-mphone" class="col-sm-2 control-label">手机</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-mphone">
						</div>
						<label for="create-status" class="col-sm-2 control-label">线索状态</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="create-status">
								<option></option>
								<option>试图联系</option>
								<option>将来联系</option>
								<option>已联系</option>
								<option>虚假线索</option>
								<option>丢失线索</option>
								<option>未联系</option>
								<option>需要条件</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="create-source" class="col-sm-2 control-label">线索来源</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="create-source">
								<option></option>
								<option>广告</option>
								<option>推销电话</option>
								<option>员工介绍</option>
								<option>外部介绍</option>
								<option>在线商场</option>
								<option>合作伙伴</option>
								<option>公开媒介</option>
								<option>销售邮件</option>
								<option>合作伙伴研讨会</option>
								<option>内部研讨会</option>
								<option>交易会</option>
								<option>web下载</option>
								<option>web调研</option>
								<option>聊天</option>
							</select>
						</div>
					</div>


					<div class="form-group">
						<label for="create-describe" class="col-sm-2 control-label">线索描述</label>
						<div class="col-sm-10" style="width: 81%;">
							<textarea class="form-control" rows="3" id="create-describe"></textarea>
						</div>
					</div>

					<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

					<div style="position: relative;top: 15px;">
						<div class="form-group">
							<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-nextContactTime">
							</div>
						</div>
					</div>

					<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

					<div style="position: relative;top: 20px;">
						<div class="form-group">
							<label for="create-address" class="col-sm-2 control-label">详细地址</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="1" id="create-address"></textarea>
							</div>
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 修改线索的模态窗口 -->
<div class="modal fade" id="editClueModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 90%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">修改线索</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">

					<div class="form-group">
						<label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="edit-clueOwner">
								<option>zhangsan</option>
								<option>lisi</option>
								<option>wangwu</option>
							</select>
						</div>
						<label for="edit-company" class="col-sm-2 control-label">公司<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-company" value="动力节点">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-call" class="col-sm-2 control-label">称呼</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="edit-call">
								<option></option>
								<option selected>先生</option>
								<option>夫人</option>
								<option>女士</option>
								<option>博士</option>
								<option>教授</option>
							</select>
						</div>
						<label for="edit-surname" class="col-sm-2 control-label">姓名<span
								style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-surname" value="李四">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-job" class="col-sm-2 control-label">职位</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-job" value="CTO">
						</div>
						<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-phone" value="010-84846003">
						</div>
						<label for="edit-website" class="col-sm-2 control-label">公司网站</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-website"
								   value="http://www.bjpowernode.com">
						</div>
					</div>

					<div class="form-group">
						<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="edit-mphone" value="12345678901">
						</div>
						<label for="edit-status" class="col-sm-2 control-label">线索状态</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="edit-status">
								<option></option>

								<option>试图联系</option>
								<option>将来联系</option>
								<option selected>已联系</option>
								<option>虚假线索</option>
								<option>丢失线索</option>
								<option>未联系</option>
								<option>需要条件</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="edit-source" class="col-sm-2 control-label">线索来源</label>
						<div class="col-sm-10" style="width: 300px;">
							<select class="form-control" id="edit-source">
								<option></option>
								<option selected>广告</option>
								<option>推销电话</option>
								<option>员工介绍</option>
								<option>外部介绍</option>
								<option>在线商场</option>
								<option>合作伙伴</option>
								<option>公开媒介</option>
								<option>销售邮件</option>
								<option>合作伙伴研讨会</option>
								<option>内部研讨会</option>
								<option>交易会</option>
								<option>web下载</option>
								<option>web调研</option>
								<option>聊天</option>
							</select>
						</div>
					</div>

					<div class="form-group">
						<label for="edit-describe" class="col-sm-2 control-label">描述</label>
						<div class="col-sm-10" style="width: 81%;">
							<textarea class="form-control" rows="3" id="edit-describe">这是一条线索的描述信息</textarea>
						</div>
					</div>

					<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

					<div style="position: relative;top: 15px;">
						<div class="form-group">
							<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-nextContactTime" value="2017-05-01">
							</div>
						</div>
					</div>

					<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

					<div style="position: relative;top: 20px;">
						<div class="form-group">
							<label for="edit-address" class="col-sm-2 control-label">详细地址</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
							</div>
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
			</div>
		</div>
	</div>
</div>

<!-- 导入线索的模态窗口 -->
<div class="modal fade" id="importClueModal" role="dialog">
	<div class="modal-dialog" role="document" style="width: 85%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">导入线索</h4>
			</div>
			<div class="modal-body" style="height: 350px;">
				<div style="position: relative;top: 20px; left: 50px;">
					请选择要上传的文件：
					<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
				</div>
				<div style="position: relative;top: 40px; left: 50px;">
					<input type="file">
				</div>
				<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
					<h3>重要提示</h3>
					<ul>
						<li>给定文件的第一行将视为字段名。</li>
						<li>请确认您的文件大小不超过5MB。</li>
						<li>从XLS/XLSX文件中导入全部重复记录之前都会被忽略。</li>
						<li>复选框值应该是1或者0。</li>
						<li>日期值必须为MM/dd/yyyy格式。任何其它格式的日期都将被忽略。</li>
						<li>日期时间必须符合MM/dd/yyyy hh:mm:ss的格式，其它格式的日期时间将被忽略。</li>
						<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
						<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
					</ul>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal">导入</button>
			</div>
		</div>
	</div>
</div>

<div>
	<div style="position: relative; left: 10px; top: -10px;">
		<div class="page-header">
			<h3>线索列表</h3>
		</div>
	</div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

	<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

		<div class="btn-toolbar" role="toolbar" style="height: 80px;">
			<form id="searchForm" class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">名称</div>
						<input name="name" class="form-control" type="text">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">公司</div>
						<input name="company" class="form-control" type="text">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">公司座机</div>
						<input name="phone" class="form-control" type="text">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">线索来源</div>
						<select options="source" name="source" class="form-control">
							<option></option>
							<%--<c:forEach items="${dicMap.source}" var="v">
								<option>${v.text}</option>
							</c:forEach>--%>
						</select>
					</div>
				</div>

				<br>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">所有者</div>
						<input name="owner" class="form-control" type="text">
					</div>
				</div>


				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">手机</div>
						<input name="mphone" class="form-control" type="text">
					</div>
				</div>

				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">线索状态</div>
						<select options="clueState" name="state" class="form-control">
							<option></option>
							<%--<c:forEach items="${dicMap.clueState}" var="v">
								<option>${v.text}</option>
							</c:forEach>--%>

						</select>
					</div>
				</div>

				<button id="searchBtn" type="button" class="btn btn-default">查询</button>

			</form>
		</div>
		<div class="btn-toolbar" role="toolbar"
			 style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
			<div class="btn-group" style="position: relative; top: 18%;">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createClueModal"><span
						class="glyphicon glyphicon-plus"></span> 创建
				</button>
				<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editClueModal"><span
						class="glyphicon glyphicon-pencil"></span> 修改
				</button>
				<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
			</div>
			<div class="btn-group" style="position: relative; top: 18%;">
				<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importClueModal"><span
						class="glyphicon glyphicon-import"></span> 导入
				</button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 导出
				</button>
			</div>

		</div>
		<div style="position: relative;top: 50px;">
			<table class="table table-hover">
				<thead>
				<tr style="color: #B3B3B3;">
					<td><input type="checkbox"/></td>
					<td>名称</td>
					<td>公司</td>
					<td>公司座机</td>
					<td>手机</td>
					<td>线索来源</td>
					<td>所有者</td>
					<td>线索状态</td>
				</tr>
				</thead>
				<tbody id="dataBody"></tbody>
			</table>
		</div>

		<div id="page" style="position: relative;top: 30px;">
		</div>

	</div>

</div>
</body>
</html>